<template>
  <div class="dia-box">
    <el-dialog v-model="dialogVisible" :title="props.viewType === 0 ? '毕业申请' : '查看审核'" width="1110px">
      <div class="bottom">
        <div class="application-info item">
          <h3 class="title">毕业申请信息</h3>
          <el-table :data="applicationData" style="width: 100%;" border>
            <el-table-column align="center" label="学员姓名" prop="studentName"></el-table-column>
            <el-table-column align="center" label="申请毕业课程" prop="courseName"></el-table-column>
            <el-table-column align="center" label="学习时间">
              <el-table-column align="center" label="开始时间" prop="openingTime"></el-table-column>
              <el-table-column align="center" label="结束时间" prop="classEnding"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="毕业考试成绩" prop="graduationGrades">
            </el-table-column>
          </el-table>
        </div>
        <div class="graduation-work item">
          <h3 class="title">毕业作品上传</h3>
          <div class="wrap">
            <div class="graduation-work-left">
              <div class="file-item" v-for="(file, idx) in graduationWork.fileList" :key="idx">
                <div class="file-name">
                  <el-icon :size="14">
                    <Document />
                  </el-icon>
                  <span class="text">{{ file.file.name }}</span>
                </div>
                <el-icon v-if="graduationWork.isEdit" class="cursor" :size="16" @click="graduationWorkDel(idx)"><Close /></el-icon>
              </div>
            </div>
            <div class="graduation-work-right">
              <el-button @click="graduationWorkUpload">上传</el-button>
              <el-button @click="graduationWorkEdit">编辑</el-button>
              <el-button @click="graduationWorkView">浏览</el-button>
            </div>
          </div>
        </div>
        <div class="work-describe">
          <div><b>作品描述</b></div>
          <el-input
            v-model="describeWork"
            placeholder="请输入作品描述"
            autosize
            type="textarea"
          />
        </div>
        <div class="opt" v-if="props.viewType === 0">
          <el-button type="primary" plan disabled v-if="applyInfo.status === 1">审核中</el-button>
          <el-button type="primary" @click="passExamine" v-else>{{ applyInfo.status === 1 ? '重新提交申请' : '提交申请'}}</el-button>
          <el-button type="danger" @click="reject" v-if="applyInfo.status === 0">驳回原因</el-button>
        </div>
        <div class="reject-reason">
          <el-dialog v-model="reasonDia" title="驳回原因" top="20vh" width="700px">
            <el-input
              disabled
              v-model="applyInfo.rejectReason"
              placeholder="驳回原因"
              autosize
              type="textarea"
            />
          </el-dialog>
        </div>
      </div>
    </el-dialog>
    <el-upload
      action="fakeaction"
      ref="upload"
      accept=".jpg, .jpeg, .gif, png, .mp4"
      style="display: none;"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :http-request="httpRequest"
    ></el-upload>
    <GraduationWorkPreview
      v-model="graduationWork.isView"
      :fileList="graduationWork.fileList"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, getCurrentInstance } from "vue";
import { Document, Close } from "@element-plus/icons-vue";
import GraduationWorkPreview from './graduation-work-preview.vue';
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance()

const props = defineProps({
  viewType: {
    type: Number,
    default: 0
  }
})

const dialogVisible = ref(false)
const describeWork = ref("")

// 学生基本信息
const applicationData = ref([{
  studentName: '张三',
}])
// 毕业作品
const graduationWork = ref({
  fileList: [],
  isEdit: false,
  isView: false,
})
const upload = ref(null)
// 申请详情
const applyInfo = ref({status: -1, score: null, rejectReason: ""})
// 毕业作品上传
const graduationWorkUpload = () => {
  const uploadRef = upload.value.$refs.uploadRef
  uploadRef.$refs.inputRef.click();
}
// 毕业作品编辑
const graduationWorkEdit = () => { 
  graduationWork.value.isEdit = !graduationWork.value.isEdit;
}

// 毕业作品浏览
const graduationWorkView = () => {
  graduationWork.value.isView = true;
}

// 移除作品
const graduationWorkDel = (idx) => {
  graduationWork.value.fileList.splice(idx, 1)
}
// 打开弹窗
const openDialog = (row) => {
  applicationData.value[0] = row
  findGraduateDetail(row)
  dialogVisible.value = true
}

// 获取申请详情
const findGraduateDetail = (row) => {
  let data = {
    gradeId: row.gradeId,
    studentId: row.studentId
  }
  proxy.$API.student.findGraduateDetail.get(data).then((res) => {
    console.log(res);
    if (res.code == 200) {
      applyInfo.value = res.data
      describeWork.value = res.data.text
    }else{
      ElMessage({
        message: res.message,
        type: 'warning',
      })
    }
  })
  .catch((err) => {
    ElMessage({
      message: err,
      type: 'error',
    })
  })
}

const reasonDia = ref(false)
const reject = () => {
  reasonDia.value = true
}

const formData = new FormData()
const handleFormData = (key, value) => {
  formData.append(key, value)
}
// 提交申请
const passExamine = () => {
  const info = applicationData.value[0]
  let picture = graduationWork.value.fileList.filter(f => f.file.type.includes("image")).map(m => m.file)
  let video = graduationWork.value.fileList.filter(f => f.file.type.includes("video")).map(m => m.file)
  picture.forEach((item, index) => {
    handleFormData(`picture[${index}]`, item)
  })
  video.forEach((item, index) => {
    handleFormData(`video[${index}]`, item)
  })
  let data = {
    studentName: info.studentName,
    gradeId: info.gradeId,
    studentId: info.studentId,
    text: describeWork.value,
  }
  Object.entries(data).forEach(([key, value]) => {
    handleFormData(key, value)
  })
  // for (const [key, value] of formData.entries()) {
  //   console.log(key, value)
  // }
  // console.log(formData);
  proxy.$API.student.applyGraduation.get(formData).then(res => {
    ElMessage({
      message: res.message,
      type: 'warning',
    })
    dialogVisible.value = false
  })
}

const beforeUpload = (file) => {
  console.log('file', file);
}

const uploadSuccess = (res, file) => {
  console.log('uploadSuccess', file);
}

const httpRequest = (option) => {
  graduationWork.value.fileList.push({file: option.file})
  blobToBase64(option.file, graduationWork.value.fileList.length-1)
}
// file转base64
const blobToBase64 = (file, index) =>{
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function (o) {
    graduationWork.value.fileList[index].baseUrl = o.target.result
  }
}

defineExpose({openDialog, dialogVisible})
</script>

<style lang="scss" scoped>
.bottom {
  padding-top: 20px;
  .item {
    padding-bottom: 30px;
    .title {
      font-size: 20px;
      padding-bottom: 10px;
      color: #333;
    }
  }
  .graduation-work {
    .wrap {
      display: flex;
      .graduation-work-left {
        border: 1px solid #333;
        width: 800px;
        height: 200px;
        overflow-y: auto;
        .file-item {
          display: flex;
          flex: 1;
          padding: 5px 20px;
          height: 30px;
          justify-content: space-between;
          .file-name {
            display: flex;
            align-items: center;
            .text {
              padding-left: 5px;
            }
          }
          &:hover {
            background-color: #f5f7fa;
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .graduation-work-right {
        display: flex;
        flex-direction: column;
        margin-left: 40px;
        .el-button {
          margin-left: 0px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.dia-box {
  ::v-deep .el-dialog__body {
    border-top: 1px solid #cfcfcf;
    padding: 10px 20px;
    height: 600px;
    overflow-y: auto;
  }
  ::v-deep .el-dialog__footer {
    background: #f0f4f7;
    text-align: center;
    padding-top: 15px;
  }
}
.reject-reason {
  ::v-deep .el-dialog__body {
    height: auto;
    .el-textarea__inner {
      min-height: 300px !important;
    }
    .btn {
      text-align: center;
      padding-top: 20px;
    }
  }
}

.work-describe {
  padding-bottom: 20px;
  &>div:nth-child(1) {
    margin-bottom: 15px;
  }
  ::v-deep .el-textarea__inner {
    min-height: 120px !important;
    width: 800px;
  }
}
</style>
